
// 注意：有状态组件一定是创建一个类组件
import React from 'react'
class StateCompWork extends React.Component {
    // 1.0 当一个变量的值发生改变后，能够自动刷新页面的显示，这种变量一定要放到state对象中
    // 注意点：state是React库自己定义好的约定
    state = {
        islogin: true,
        books:['DOM编程艺术','Vue深入浅出']
    }

    clickHander = () => { 
        // 切换islogin属性的状态，如果是true则切换到false，如果是false切换到true
        this.setState({islogin: !this.state.islogin})
    }

    render() {
        return (<div>
            {/* 3.0 使用状态属性 */}
            当前状态：{this.state.islogin + ''} <br />
            {
                this.state.islogin ? <ul>
                {
                     this.state.books.map(item => (<li key={ item }>{item}</li>))
                }
            </ul>:<span>您未登录</span>
            }
            <br/>
            <button onClick={ this.clickHander }>切换islogin状态值</button>
        </div>)
    }
}

export default StateCompWork;